<template>
<div>
  <img src="@/assets/img/topBanner.png" style="width:100%;height:44px;display:block" alt="">
  <img src="@/assets/img/indexbanner2.png" class="shouye" alt="" />
  <div class="supplyDemandHome">
    <div class="df jcsb tabsimg">
      <img src="@/assets/img/zcxx.png" alt="" @click="goTozhengce" />
      <img src="@/assets/img/pdbz.png" alt="" @click="goToBiaozhun" />
      <img src="@/assets/img/gqxx.png" alt="" @click="goToSupply(1)" />
    </div>
    <div class="df jcsb mb15">
      <div class="fz15 c3">热门奶山羊供应</div>
      <div class="fz14 c9" @click="goToSupply(1)">
        更多
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="items">
      <div class="item" v-for="(item, key) in supplyList" :key="key" @click="goToDetail(item)">
        <img :src="item.singleImg | imgPaths" alt="" />
        <div class="content">
          <div class="title titlestyle">{{ item.content }}</div>
          <div class="price">
            <span>¥{{ item.price }}</span>
            元/只
          </div>
        </div>
      </div>
    </div>

    <div class="df jcsb mb15 mt20">
      <div class="fz15 c3">热门奶山羊需求</div>
      <div class="fz14 c9" @click="goToSupply(2)">
        更多
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="item2s" v-for="(item, key) in demandList" :key="key">
      <div class="item2_content">
        <div class="fz15 c3 mb10 titlestyle">{{ item.content }}</div>
        <div class="df mb10 fz13 c6 w2">
          <div>品种：{{ item.breedName }}</div>
          <!-- <div>等级：{{ item.gradeName }}</div> -->
        </div>
        <div class="df mb10 fz13 c6 w2">
          <div v-if="item.sex == 0">性别：公</div>
          <div v-if="item.sex == 1">性别：母</div>

          <div>数量（只）：{{ item.number }}</div>
        </div>
        <!-- <div class="c6 mb10 fz13">联系人：</div> -->
        <div class="c6 mb10 fz13">
          地点：{{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}{{ item.address }}
        </div>
        <div class="c6 mb10 fz13">求购时间：{{ item.startDate }} 至 {{ item.endDate }}</div>
      </div>
      <div class="tel df jcsb">
        <div class="tel_l df">
          <img src="@/assets/img/a11.png" alt="" />
          <span class="fz13 c6">{{ item.contacts }}</span>
        </div>
        <div class="tel_r" @click="goCallPhone(item)">打电话</div>
      </div>
    </div>

    <div style="height: 50px"></div>
  </div>
</div>

</template>

<script>
import { Icon } from 'vant'
import { sheepSupplyList } from '@/api/supply'
import { setValue, getValue } from '@/utils/auth'
import { postHandle } from '@/api'

export default {
  name: 'SupplyDemandHome',
  components: {
    [Icon.name]: Icon
  },
  data() {
    return {
      supplyList: [],
      demandList: [] // 需求列表
    }
  },

  created() {
    this.$bridge.register('refresh', data => {
      this.loadList()
    })
  },
  mounted() {
    this.loadList()
  },
  methods: {
    loadList() {
      sheepSupplyList({ page: 1, perPage: 6, type: 0, queryDataType: 1, releaseState: 0, shield: 0 }).then(res => {
        console.log(res)
        this.supplyList = res.data.rows
      })

      sheepSupplyList({ page: 1, perPage: 4, type: 1, queryDataType: 1, releaseState: 0, shield: 0 }).then(res => {
        console.log(res)
        this.demandList = res.data.rows
      })
    },
    goCallPhone(item) {
      // alert(item.telephone)
      this.call(item.id, item.telephone)
    },

    call(id, telephone) {
      postHandle(`/agri/api/yzbzh/contactHistory/save`, {
        sheepInfoId: id,
        loginUserId: getValue('loginUserId')
      }).then(res => {
        if (res.status === 0) {
          this.$bridge.call('goCallPhone', telephone)
        }
      })
    },

    goTozhengce() {
      this.$bridge.call('ptelephoneolicyInformation')
    },
    goToBiaozhun() {
      this.$bridge.call('evaluationStandard')
    },
    goToSupply(type) {
      setValue('typeState', type)

      this.$bridge.call('supply')
    },
    goToDetail(item) {
      setValue('shopInfo-view-id', item.id)
      setValue('shopInfo-view-content', item.content)
      this.$bridge.call('shopInfo')
    }
  }
}
</script>
<style lang='scss' scoped>
.supplyDemandHome {
  padding: 0 15px;
}
.mt20 {
  margin-top: 20px;
}
.tel {
  padding: 0 15px;
  padding-top: 11px;
  .tel_l {
    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }
  }
  .tel_r {
    padding: 2px 9px;
    background-color: #37b5b5;
    color: #ffffff;
    font-size: 13px;
  }
}
.mb15 {
  margin-bottom: 15px;
}
.mb10 {
  margin-bottom: 10px;
}
.w2 {
  div {
    width: 50%;
  }
}
.item2s {
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 12px 0;
  margin-bottom: 10px;
  .item2_content {
    padding: 0 15px;
    border-bottom: 1px solid #eeeeee;
  }
}
.df {
  display: flex;
  align-items: center;
}
.fz15 {
  font-size: 15px;
}
.fz14 {
  font-size: 14px;
}
.fz13 {
  font-size: 13px;
}
.c9 {
  color: #999999;
}
.c6 {
  color: #666666;
}
.c3 {
  color: #333333;
}
.jcsb {
  justify-content: space-between;
}
.items {
  overflow: hidden;
  .item {
    width: 167px;
    border-radius: 10px;
    margin-right: 11px;
    margin-bottom: 10px;
    float: left;
    img {
      width: 100%;
      height: 130px;
      border-radius: 10px 10px 0 0;
    }
    .content {
      padding: 10px;
      background-color: #fff;
      border-radius: 0 0 10px 10px;
      .title {
        font-size: 13px;
        color: #333333;
        margin-bottom: 10px;
      }
      .price {
        color: #ff4141;
        font-size: 10px;
        span {
          font-size: 16px;
        }
      }
    }
  }
  .item:nth-child(2n) {
    margin-right: 0;
  }
}
.shouye {
  width: 100%;
  // margin-top: 20px;
  margin-bottom: 15px;
  display:block;
      margin-top: -1px;
  // position: relative;
  // height: 130px;
}
.tabsimg {
  margin-bottom: 15px;
  img {
    width: 108px;
    height: 100px;
  }
}
.titlestyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
